<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>生命游戏网页版</title>
		<link type="text/css" rel="stylesheet" href="css/index.css" />
		<link type="text/css" rel="stylesheet" href="css/style.css" />
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="js/index.js"></script>
	</head>

	<body>
		<div class="center-content-box">
			<h1>生命游戏</h1>
		</div>
		<div id="table-module" class="center-content-box">

			<!-- 游戏简介 -->
			<div id="game-intro">
				<h2>游戏简介</h2>
				<p>生命游戏(game of life)为1970年由英国数学家J. H. Conway所提出
					某细胞的邻居包括上、下、左、右、左上、左下、右上与右下相邻之细胞 游戏规则如下：</p>
				<p><b>孤单死亡：</b>如果细胞的邻居小于等于1个，则该细胞在下一次状态将死亡；</p>
				<p><b>拥挤死亡：</b>如果细胞的邻居在4个及以上，则该细胞在下一次状态将死亡；</p>
				<p><b>稳定：</b>如果细胞的邻居为2个或3个，则下一次状态为稳定存活；</p>
				<p><b>复活：</b>如果某位置原无细胞存活，而该位置的邻居为3个，则该位置将复活一个细胞。</p>
			</div>

			<div id="table-box">
				<table id="cell-table" border="1">
				</table>
			</div>

			<!-- 操作界面 -->
			<div id="game-operator">
				<div class="text-module">
					<p id="cur-period"><span class="Label">当前周期：</span><span id="period"></span></p>
					<p>
						<span class="Label">行列数量：</span>
						<input id="cell-count" type="text" placeholder="整数(0<n<=100)" />
					</p>
					<p><span class="Label">演化速度：</span><input id="speed" type="text" /></p>
					<p title="设置随机分布时的密度"><span class="Label">分布密度：</span><input id="thickness" type="text" /></p>
					<p class="comment">提示：“行列数量” 和 “分布密度” 在点击 “重新布置” 后生效。</p>
				</div>

				<div class="btn-module">
					<div class="btn-box">
						<p><input id="resetCell" type="button" value="重新布置" /></p>
						<p><input id="btn-randomSet" type="button" value="随机分布" /></p>
						<p><input id="next-term" type="button" value="下一周期" /></p>
						<p><input id="btn-start" type="button" value="开始演化" /></p>
					</div>
				</div>

			</div>
		</div>
		<div id="copy-right">
			<nav class="center-content-box">
				<a href="">作者：Nonoas</a>
				<hr>
				<a href="https://blog.csdn.net/weixin_44155115/article/details/105129831">CSDN</a>
				<hr>
				<a href="https://gitee.com/nonoas/webProj/tree/master/LifeGame" target="_blank">Gitee</a>
			</nav>
		</div>
	</body>

</html>
